
<template>
	<view>
		<view class="changeHousing">
			<view class="housingName" @click="opneChangeHousing">
				{{housingName}}
				<u-icon color="#ffffff" size="24" style="margin-left: 8rpx;" name="arrow-down-fill"></u-icon>
			</view>
		</view>
		<image class="index-top-bg" src="../../static/images/index-bg.png" mode="aspectFill"></image>
		<!-- 页面跳转按钮 -->
		<view class="wrap index-button">
			<view class="index-button-box">
				<u-row justify="space-between" gutter="10" customStyle="margin-bottom: 50rpx">
					<u-col span="3">
						<view class="nav-button" @click="toModular('activity')">
							<image class="nav-image" src="../../static/images/index-bmhd.png" mode="widthFix"></image>
							<view>便民活动</view>
						</view>
					</u-col>
<!-- 					<u-col span="3">
						<view class="nav-button" @click="toModular('epidemic')">
							<image class="nav-image" src="../../static/images/yq2.png" mode="widthFix"></image>
							<view>疫情动态</view>
						</view>
					</u-col> -->
					<u-col span="3">
						<view class="nav-button" @click="toModular('service')">
							<image class="nav-image" src="../../static/images/index-yqfw.png" mode="widthFix"></image>
							<view>健康填报</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="nav-button" @click="toModular('trip')">
							<image class="nav-image" src="../../static/images/index-xcxx.png" mode="widthFix"></image>
							<view>行程信息</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="nav-button" @click="toModular('notice')">
							<image class="nav-image" src="../../static/images/index-ggxx.png" mode="widthFix"></image>
							<view>公告信息</view>
						</view>
					</u-col>
				</u-row>
				<u-row justify="space-between" gutter="10">
					<u-col span="3">
						<view class="nav-button" @click="toModular('visitor')">
							<image class="nav-image" src="../../static/images/index-fkdj.png" mode="widthFix"></image>
							<view>访客登记</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="nav-button" @click="toModular('housingInfo')">
							<image class="nav-image" src="../../static/images/index-glfw.png" mode="widthFix"></image>
							<view>房屋管理</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="nav-button" @click="toModular('feedback')">
							<image class="nav-image" src="../../static/images/index-tsyj.png" mode="widthFix"></image>
							<view>意见反馈</view>
						</view>
					</u-col>
					<u-col span="3"></u-col>
				</u-row>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="index-rotation" v-if="!rotationEmpty">
			<u-swiper height="254" :list="rotationList" showTitle radius="10" keyName="picUrl" @click="clickRotation">
			</u-swiper>
		</view>
		<!-- 公告 -->
		<view class="notice">
			<view class="notice-top">社区公告</view>
			<template v-if="noticeEmpty">
				<view class="tabsContent">
					<u-empty mode="data" width="180" height="180" textSize="28"
						icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无公告信息"></u-empty>
				</view>
			</template>
			<template v-else>
				<view class="notice-box" v-for="(item,index) in noticeList" @click="toNoticeDetails(item)">
					<view class="notice-left">
						<!-- 标题title -->
						<view class="notice-title">{{item.title}}</view>
						<view class="notice-time">{{item.creatTime}}</view>
					</view>
					<view class="notice-right">
						<text>更多</text>
						<u-icon name="arrow-right-double" size="32"></u-icon>
					</view>
				</view>
			</template>
		</view>
		<u-picker :show="changeHousing" ref="uPicker" keyName="name" itemHeight="88" :columns="housingList"
			@confirm="getChangeHousing" @close="changeHousing = false;" @cancel="showhouse = false;"
			:defaultIndex="defaultIndex" :closeOnClickOverlay="true"></u-picker>
		<u-loading-page style="z-index: 1000;" color="#FFFFFF" :loading="loading" fontSize="24"
			bg-color="rgba(0,0,0,0.5)"></u-loading-page>
	</view>
</template>

<script>
	import api from '@/api/api.js';
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				noticeList: null, //公告列表
				rotationList: null, //广告轮播图数组
				changeHousing: false,
				housingList: [],
				housingName: '请选择小区',
				housingId: null,
				defaultIndex: [0],
				loading: false,
				// 轮播图是否为空
				rotationEmpty: false,
				// 公告是否为空
				noticeEmpty: false,
				login_user: false
			}
		},
		onLoad() {
			this.getNoticeList();
			this.getRotation();
			this.getHousingList();

		},
		onShow() {
			let userInfo = uni.getStorageSync("userInfo");
			console.log('userInfo', !userInfo)
			if (!userInfo) {
				this.login_user = false
			} else {
				this.login_user = true
			}
		},
		methods: {
			// 获取公告广告新闻
			getNoticeList() {
				let data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					type: 1, //1公告  2广告  3新闻
					housingId: this.housingId
				}
				this.loading = true;
				api.getNotice(data).then(res => {
					this.loading = false;
					if (res.data.code == 601) {
						this.noticeEmpty = true
					}else if (res.data.code == 200){
						this.noticeList = res.data.rows;
						this.noticeEmpty = false
					}
				})
			},
			// 获取轮播图
			getRotation(){
				let data = {
					pageNum: 1,
					pageSize: 6,
					type: 1
				}
				api.getDiagram(data).then(res => {
					if (res.data.code == 601){
						this.rotationEmpty = true
					}else if (res.data.code == 200) {
						this.rotationList = JSON.parse(JSON.stringify(res.data.rows).replace(/name/g, 'title')) ;
						this.rotationEmpty = false
					}
				})
			},
			// 点击轮播图
			clickRotation(index){
				console.log('1231231',this.rotationList[index])
				uni.$u.route({
					type: "navigateTo",
					url: "/pages/rotationDetails/index",
					params: {
						id: this.rotationList[index].id
					}
				});
			},
			// 跳转公告详情
			toNoticeDetails(item) {
				uni.$u.route({
					type: "navigateTo",
					url: "/pages/notice/details",
					params: {
						id: item.id
					}
				});
			},
			// todetails(index) {
			// 	let id = this.rotationList[index].id
			// 	uni.$u.route({
			// 		type: "navigateTo",
			// 		url: "/pages/notice/details",
			// 		params: {
			// 			id
			// 		}
			// 	});
			// 	console.log(id)
			// },
			// 跳转模块
			toModular(val) {
				const that = this;
				console.log('login_user',that.login_user)
				if (!that.login_user) {
					uni.$u.toast('请先登录')
					return
				}
				if (val == 'housingInfo') { //房屋管理
					uni.$u.route('/pages/housingInfo/list');
				} else if (val == 'notice') { //公告信息
					uni.$u.route('/pages/notice/list');
				} else if (val == 'feedback') { //反馈意见
					uni.$u.route('/pages/feedback/list');
				} else if (val == 'activity') { //便民活动
					uni.$u.route('/pages/activity/index');
				} else if (val == 'visitor') { //访客登记
					uni.$u.route('/pages/visitor/list');
				} else if (val == 'epidemic') { //疫情服务
					uni.$u.route('/pages/epidemic/index');
				}else if (val == 'service') { //健康填报
					uni.$u.route('/pages/service/list');
				} else if (val == 'trip') { //行程信息
					uni.$u.route('/pages/trip/index');
				}
			},
			// 获取全部小区列表
			getHousingList() {
				this.loading = true;
				api.getHouselist().then(res => {
					this.loading = false;
					if (res.data.code == 200) {
						console.log(res.data)
						this.housingList = [];
						this.housingList.splice(0, 1, res.data.rows);
						this.housingName = this.housingList[0][this.defaultIndex[0]].name;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 开启小区选选项
			opneChangeHousing() {
				this.changeHousing = true;
			},
			// 选择小区
			getChangeHousing(e) {
				this.defaultIndex = e.indexs;
				this.housingId = e.value[0].id;
				this.housingName = e.value[0].name;
				this.changeHousing = false;
				uni.setStorageSync('housingId', this.housingId)
				this.getNoticeList(1);
				this.getNoticeList(2);
			},

		}
	}
</script>

<style lang="scss" scoped>
	.changeHousing {
		height: 60rpx;
		width: calc(100% - 64rpx);
		display: flex;
		align-items: center;
		padding: 8rpx 32rpx;
		font-size: 24rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: #FFFFFF;

		.housingName {
			font-size: 24rpx;
			color: #FFFFFF;
			background-color: #17ABE3;
			padding: 8rpx 32rpx;
			border-radius: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

		}
	}

	.index-top-bg {
		margin-top: 76rpx;
		width: 100%;
		height: 320rpx;
	}

	.index-button {
		margin-top: -100rpx;
	}

	.wrap {
		width: calc(100% - 64rpx);
		padding: 32rpx;

		.index-button-box {
			background-color: #fff;
			z-index: 999;
			border-radius: 10rpx;
			padding: 40rpx 0;
			position: relative;

			.nav-button {
				text-align: center;

				.nav-image {
					width: 90rpx;
				}

				view {
					font-size: 24rpx;
				}
			}
		}
	}

	.notice {
		width: calc(100% - 64rpx);
		padding: 32rpx 32rpx 0rpx 32rpx;

		.notice-top {
			font-size: 32rpx;
			font-weight: bold;
			border-left: #17abe3 10rpx solid;
			padding-left: 12rpx;
			margin-bottom: 20rpx;

			.tabsContent {
				width: 100%;
				background-color: #FFFFFF;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.notice-box {
			background-color: #fff;
			width: 95%;
			border-radius: 20rpx;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.notice-left {
				width: 85%;

				.notice-title {
					font-size: 32rpx;
					font-weight: bold;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.notice-time {
					font-size: 20rpx;
					color: #666;
					margin-top: 20rpx;
				}
			}

			.notice-right {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #666;
			}
		}
	}

	.index-rotation {
		width: calc(100% - 64rpx);
		padding: 10rpx 32rpx;
	}
</style>